<style lang="sass" scoped>
    .common_block{
        .head{
            .pink{
                color:pink;
            }
            i{
                font-size: 16px;
                margin-left: 6px;
                margin-right: 0;
            }
        }
    }
    .add{
        width: 100%;
        height:60px;
        line-height:60px;
        background: #409EFF;
        margin-top:10px;
        margin-bottom:10px;
        color:#fff;
        text-align: center;
        cursor: pointer;
    }
    .iconfont{
        font-size:25px;
        cursor:pointer;
        text-decoration:none;
        color:#666;
    }
</style>
<template>
    <div class="container pd15">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
            <el-form-item label="产品列表：">
                <div>
                    <el-select
                        v-model="keyWord"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入关键词"
                        :remote-method="remoteMethod"
                        @change="change"
                        :loading="loading">
                            <el-option
                            v-for="(item,i) in productList"
                            :key="item.productCode"
                            :label="item.productName"
                            :value="item">
                            </el-option>
                    </el-select>
                </div>
                <div>
                    <el-table :data="ruleForm.productData" style="width: 100%" :row-class-name="tableRowClassName">
                        <el-table-column prop="productCode" label="产品编码">
                        </el-table-column>
                        <el-table-column prop="productName" label="产品名称">
                        </el-table-column>
                        <el-table-column label="数量">
                            <template slot-scope="props">
                                <el-input v-model.trim="props.row.count"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="props">
                                <el-button @click="delProduct(props)" type="primary" :plain="false">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>
            <el-form-item label="商品名称：" prop="itemName">
                <el-input v-model.trim="ruleForm.itemName"></el-input>
            </el-form-item>
            <el-form-item label="类目：" prop="xxx">
                <el-select v-model="ruleForm.categId" placeholder="请选择类目" :multiple="true">
                    <el-option v-for="item in categlist" :key="item.categId" :label="item.categName" :value="item.categId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品描述：" prop="itemDesc">
                <el-input v-model.trim="ruleForm.itemDesc"></el-input>
            </el-form-item>
            <el-form-item label="售价：" prop="price">
                <el-input v-model.trim="ruleForm.price"></el-input>
            </el-form-item>
            <el-form-item label="成本价：" prop="costPrice">
                <el-input v-model.trim="ruleForm.costPrice"></el-input>
            </el-form-item>
            <el-form-item label="发行价：" prop="issuePrice">
                <el-input v-model.trim="ruleForm.issuePrice"></el-input>
            </el-form-item>
            <el-form-item label="开本：">
                <el-input v-model.trim="ruleForm.format"></el-input>
            </el-form-item>
            <el-form-item label="国际标准书号ISBN："  prop="ISBN">
                <el-input v-model.trim="ruleForm.ISBN"></el-input>
            </el-form-item>
            <el-form-item label="是否套装：">
                <template>
                    <el-radio v-model="ruleForm.isSuit" label="1">是</el-radio>
                    <el-radio v-model="ruleForm.isSuit" label="0">否</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="作者：">
                <el-input v-model.trim="ruleForm.author"></el-input>
            </el-form-item>
            <el-form-item label="出版社：">
                <el-input v-model.trim="ruleForm.press"></el-input>
            </el-form-item>
            <el-form-item label="装订方式：">
                <el-input v-model.trim="ruleForm.bindingWay"></el-input>
            </el-form-item>

            <el-form-item label="商品主图：" prop="mainImageUrl">
                <upload-image :data.sync="ruleForm.mainImageUrl" :limit="1"></upload-image>
            </el-form-item>
            <el-form-item label="商品轮播图：" prop="itemImageList">
                <upload-image :data.sync="ruleForm.itemImageList" :limit="3"></upload-image>
            </el-form-item>
            <el-form-item label="商品详情：" prop="detailImageList">
                <upload-image :data.sync="ruleForm.detailImageList"></upload-image>
            </el-form-item>

            <div class="mt20">
                <!-- 新增提交 -->
                <el-button @click="add('ruleForm')" v-if="!$route.query.itemCode" class="ml20" type="primary" :plain="false" round>提交</el-button>
                <!-- 修改提交 -->
                <el-button @click="modify('ruleForm')" v-else class="ml20" type="primary" :plain="false" round>提交</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
    import { mapMutations } from 'vuex'
    import uploadImage from 'components/uploadImage'
    export default {
        components: {
            uploadImage
        },
        data() {
            return {
                beforeajax:false,
                ruleForm: {
                    productData:[],//单品的产品集合对象
                    itemName:'', //	是	string	商品名称
                    categId:[], //	是	string	类目ID
                    price:'', //	是	string	售价
                    costPrice:'',//成本价
                    issuePrice:'',//发行价
                    mainImageUrl:[], //	是	string	主图
                    detailImageList:[], //	是	string	商品详情
                    itemImageList:[], //	是	string	轮播图，多个用逗号隔开
                    format:'', //	是	string	开本
                    ISBN:'', //	是	string	国际标准书号ISBN
                    isSuit:'0', //	是	string	是否套装，0-不是，1-是
                    author:'', //	是	string	作者
                    press:'', //	是	string	出版社
                    bindingWay:'', //	是	string	装订方式
                },
                rules: {
                    itemName: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                    ],
                    ISBN: [
                        { required: true, message: '请输入国际标准书号ISBN', trigger: 'blur' },
                    ],
                },
                categlist:[],
                keyWord:'',
                productList:[],
                loading:false,
            }
        },
        watch: {},
        created() {
            if(this.$route.query.itemCode){
                document.title = "修改商品"
                this.NAV_EDIT({
                    menu:this.$route.meta.menu,
                    title:'修改商品'
                })
                this.getInfo();
            }
            server.getCategList().then(res=>{
                this.categlist = res;
            })
        },
        mounted() {
            this.$nextTick(() => { 
                
            });
        },
        methods: {
            ...mapMutations("index", ["NAV_EDIT"]),
            tableRowClassName(row, index) {
                //把每一行的索引放进row
                row.index = index
            },
            getInfo(){
                util.ajax({
                    url:config.baseApi + 'bookMall-admin/api/item/getItemDetail',
                    data:{
                        itemCode:this.$route.query.itemCode
                    },
                    success:(data=>{
                        if(data.data.mainImageUrl){
                            data.data.mainImageUrl = data.data.mainImageUrl.split(',');
                        }else{
                            data.data.mainImageUrl = [];
                        }
                        if(data.data.itemImageList){
                            data.data.itemImageList = data.data.itemImageList.split(',');
                        }else{
                            data.data.itemImageList = [];
                        }
                        if(data.data.detailImageList){
                            data.data.detailImageList = data.data.detailImageList.split(',');
                        }else{
                            data.data.detailImageList = [];
                        }
                        if(data.data.categId){
                            data.data.categId = data.data.categId.split(',');
                        }else{
                            data.data.categId = [];
                        }
                        this.ruleForm = data.data;
                    })
                })
            },
            add(formName){
                this.$refs[formName].validate((valid) => {
                    let param = JSON.parse(JSON.stringify(this.ruleForm));
                    if(param.productData.length===0){
                        popup.alert({content:'请至少选择一个产品！'});
                        return;
                    }
                    if (valid) {
                        param.productData = JSON.stringify(param.productData)
                        param.mainImageUrl = param.mainImageUrl.toString();
                        param.itemImageList = param.itemImageList.toString();
                        param.detailImageList = param.detailImageList.toString();
                        param.categId = param.categId.toString();
                        util.ajax({
                            url:config.baseApi + 'bookMall-admin/api/item/addItem',
                            data:param,
                            success:()=>{
                                popup.miss({content:'新增成功'});
                                router.go(-1)
                            }
                        })
                    }
                })
            },
            modify(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let param = JSON.parse(JSON.stringify(this.ruleForm));
                        param.mainImageUrl = param.mainImageUrl.toString();
                        param.itemImageList = param.itemImageList.toString();
                        param.detailImageList = param.detailImageList.toString();
                        param.categId = param.categId.toString();
                        util.ajax({
                            url:config.baseApi + 'bookMall-admin/api/item/modifyItem',
                            data:param,
                            success:()=>{
                                popup.miss({content:'修改成功'});
                                router.go(-1)
                            }
                        })
                    }
                })
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    this.getProductList(query).then(res=>{
                        this.productList = res;
                        this.loading = false;
                    })
                } else {
                    this.productList = [];
                }
            },
            getProductList(keyWord){
                return new Promise((resolve,reject)=>{
                    util.ajax({
                        url:config.baseApi + 'bookMall-admin/api/product/getProductList',
                        data:{
                            keyWord:keyWord
                        },
                        success:(data=>{
                            resolve(data.data);
                        })
                    })
                })
            },
            change(e){
                let obj = JSON.parse(JSON.stringify(e));
                let status = false;
                let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
                ruleForm.productData.forEach((item,i) => {
                    if(item.productCode===obj.productCode){
                        status = true;
                    }
                });
                if(!status){
                    ruleForm.productData.push({
                        productCode:obj.productCode,
                        productName:obj.productName,
                        count:'1'
                    })
                    if(ruleForm.productData.length===1){
                        ruleForm.format = obj.format;
                        ruleForm.ISBN = obj.ISBN;
                        ruleForm.isSuit = obj.isSuit;
                        ruleForm.author = obj.author;
                        ruleForm.press = obj.press;
                        ruleForm.bindingWay = obj.bindingWay;
                    }
                }
                this.ruleForm = ruleForm;
                this.keyWord = '';
            },
            delProduct(props){
                let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
                ruleForm.productData.splice(props.$index,1);
                this.ruleForm = ruleForm;
            }
        }
    };
</script>